<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

<meta charset="utf-8" />
<meta name="keywords" content="track element, html5, video, audio, accessibility, Sam Dutton" /> 
<meta name="Description" content="The HTML5 track element provides a simple, standardised way to add subtitles, captions, screen reader descriptions, chapters and timed metadata to video and audio." /> 

<title>Track element demo</title>

<!-- jQuery files for autocomplete input#searchInput -->
<link type="text/css" href="css/lib/jquery-ui/jquery-ui-1.8.16.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="js/lib/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/lib/jquery-ui-1.8.16.custom.min.js"></script>

<!-- jCarousel files -->
<!-- <link rel="stylesheet" type="text/css" href="css/lib/jcarousel/style.css" /> -->
<link rel="stylesheet" type="text/css" href="css/lib/jcarousel/skins/tango/skin.css" />
<script type="text/javascript" src="js/lib/jquery.jcarousel.min.js"></script>

<!-- Colorbox (for 'Read original article' link) -->
<link rel="stylesheet" href="css/lib/colorbox/colorbox.css" />
<script src="js/lib/jquery.colorbox.js"></script>

<link type="text/css" href="css/track.css" rel="stylesheet" />	
<script src="js/track.js"></script>
<script src="js/carousel.js"></script>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script> 
<script type="text/javascript"> 
_uacct = "UA-2630780-1";
if (typeof urchinTracker != "undefined") {
	urchinTracker();
}
</script> 

</head>

<body>

<div id="container">

<h1>Using JSON with the HTML5 video track element</h1>

<div id="blurb">
<p>This demo shows how the <a href="https://developer.mozilla.org/en/HTML/Element/track" title="MDN track element article" target="_blank">track element</a> can be used to build page content &ndash; and synchronise page changes with media playback. </p>
<p>The video has a <a href="tracks/subtitle-en.vtt" title="WebVTT subtitle track" target="_blank">subtitle track</a>, and a <a href="tracks/metadata-en.vtt" title="WebVTT metadata track" target="_blank">metadata track</a> with cues in JSON format. The metadata cues are parsed to build the carousel, and as each metadata cue becomes active, the carousel and the content in the panel on the right are updated. The video can be navigated by clicking on thumbnails in the carousel; the content panel has links to full articles on Wikipedia.</p>
<p>Content and layout are based on work done by BBC R&D Prototyping as part of the <a href="http://www.p2p-next.org" title="P2P-Next project">P2P-Next project</a>.</p>
</div>

<div class="warningMessage trackNotSupported">This demo requires a browser such as <a href="http://tools.google.com/dlpage/chromesxs" title="Google Chrome Canary download">Google Chrome Canary</a> that supports the track element. In Chrome you must enable track element support on the chrome://flags page.</div>

<div id="videoAndSearch">

	<video autoplay controls>
		<source src="video/treeOfLife-en.webm"  type='video/webm; codecs="vp8, vorbis"' />
		<!-- <source src="http://cf.cdn.vid.ly/2s9o1l/webm.webm"  type='video/webm; codecs="vp8, vorbis"' /> -->
		<track label="English subtitles" kind="subtitles" srclang="en" src="tracks/treeOfLife-subtitles-en.vtt" default />
		<track label="Metadata" kind="metadata" srclang="en" src="tracks/treeOfLife-metadata-en.vtt" default />
	</video>
	
	<div id="searchContainer" class="trackSupported">
		<label for="searchInput">Search subtitles: </label>
		<input id="searchInput" autofocus />
		<div id="searchHint">Enter text to find subtitles, then select a result to move to that point in the video.</div>
	</div>
	
	<div id="carouselContainer" class="trackSupported">
		<ul id="carousel" class="jcarousel-skin-tango">
			<!-- Content loaded dynamically -->
		</ul>
	</div>

</div> <!-- videoAndSearch -->

<div id="moreInformation" class="trackSupported">

	<h2>Multi-celled organisms</h2>

	<p>Multi-celled organisms have different types of cells that perform specialised functions. Most life that can be seen with the naked eye is multi-cellular. These organisms are though to have evolved around 1 billion years ago with plants, animals and fungi having independent evolutionary paths.</p>

	<a id="originalArticle" href="http://en.wikipedia.org/wiki/Multicellular">Read original article</a>

</div>

<div id="copyright">&copy; 2009 BBC. <a href="http://www.wellcometreeoflife.org/">Wellcome Tree of Life</a> animation and related content is used under <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/uk/">Creative Commons licence</a>. Further information is available in <a href="licence.txt" title="licensing information">licence.txt</a>.</div>

</div> <!-- container -->

</body>

</html>